{{template "header" .}}
<style>
    .scale-icon {
        position: fixed;
        right: 20px;
        bottom: 60px;
    }

    .scale-icon .iconfont {
        font-size: 35px;
        opacity: 0.5;
        display: block;
        margin-bottom: 10px;
    }

    .add-btn {
        position: fixed;
        bottom: 55px;
        left: calc(50% - 50px);
    }

    .add-btn button {
        height: 30px;
        width: 100px;
        line-height: 30px;
        font-size: 14px;
        opacity: 0.5;
    }
</style>
<div style="height:calc(100vh - 55px);width:100vw;overflow: auto;background-color: #efefef;display:flex;">
    <div class="tree root" id="tree-root" style="transform:scale(0.5)">
        {{.tree}}
    </div>
</div>
<div class="scale-icon">
    <span class="iconfont icon-download" onclick="_export()"></span>
    <span class="iconfont icon-jia" onclick="scale('+')"></span>
    <span class="iconfont icon-jian" onclick="scale('-')"></span>
</div>

<div id="open-in-wx" class="modal" style="top:10px;;right:0;width:100vw;left:0;">
    <div class="body" style="border:none;border-radius: 0;background-color: transparent;text-align: center;padding:0;">
        <img src="/image/openInWX.png" alt="">
    </div>
</div>

{{if eq .m true}}
<!-- 新增/修改成员 -->
<div class="add-btn btn">
    <button onclick="addMember(event)">新增成员</button>
</div>
<div class="modal" id="add-member-modal">
    <div class="body">
        <form action="/m/tree/add" onsubmit="onAddSubmit(event)">
            <input type="hidden" name="id">
            <div class="form-item">
                <div class="label">姓名</div>
                <div class="input">
                    <input type="text" name="name" placeholder="请输入姓名" autocomplete="off">
                </div>
            </div>
            <div class="form-item">
                <div class="label">性别</div>
                <div class="input radio-group">
                    <label>
                        <input type="radio" name="sex" value="1" checked>男
                    </label>
                    <label>
                        <input type="radio" name="sex" value="2">女
                    </label>
                </div>
            </div>
            <div class="form-item">
                <div class="label">出生日期</div>
                <div class="input">
                    <input type="date" name="birth">
                </div>
            </div>
            <div class="form-item">
                <div class="label">排序</div>
                <div class="input">
                    <input type="number" name="sort">
                </div>
            </div>
            <div class="btn">
                <button type="submit">新增</button>
            </div>
        </form>
    </div>
</div>

<div class="action-sheel" id="action-sheel">
    <div class="body">
        <div class="title">操作</div>
        <ul>
            <li class="edit-act">修改</li>
            <li class="del-act">删除</li>
        </ul>
    </div>
</div>
<script>
    function addMember(ev) {
        var modal = document.getElementById('add-member-modal');
        modal.querySelector('.btn button').innerText = '新增';
        modal.showModal()
    }
    function onAddSubmit(ev) {
        ev.preventDefault();
        var form = ev.target;
        if (form.elements.name.value == "") {
            form.elements.name.warning()
            return;
        }
        var id = form.elements.id.value;
        var name = form.elements.name.value;
        var sex = form.elements.sex.value;
        var birth = form.elements.birth.value;
        var sort = form.elements.sort.value;
        ajax(form.action, 'post', { id, name, sex, birth,sort }).then(() => {
            document.getElementById('add-member-modal').hide();
            window.location.reload();
        }).catch(e => {
            alert(e);
        })
    }

    document.querySelector('.tree .children').addEventListener('click', ev => {
        var span;
        switch (true) {
            case ev.target.matches('span'):
                span = ev.target;
                break;
            case ev.target.matches('i'):
                span = ev.target.parentNode;
                break;
        }
        if (span) {
            var id = span.dataset.id;
            var name = span.dataset.name;
            var sex = span.dataset.sex;
            var birth = span.dataset.birth;
            var sort = span.dataset.sort;
            var actionSheel = document.getElementById('action-sheel');
            actionSheel.querySelector('.edit-act').onclick = function (ev2) {
                var modal = document.getElementById('add-member-modal');
                var form = modal.querySelector('form');
                form.action = '/m/tree/edit';
                form.elements.id.value = id;
                form.elements.name.value = name;
                form.elements.sex.value = sex;
                form.elements.birth.value = birth;
                form.elements.sort.value = sort;
                actionSheel.hide();
                modal.querySelector('.btn button').innerText = '修改';
                modal.showModal();
            }
            actionSheel.querySelector('.del-act').onclick = function (ev2) {
                if (!confirm('确认删除')) return;
                ajax('/m/tree/del', 'post', { id }).then(() => {
                    actionSheel.hide();
                    window.location.reload();
                }).catch(e => {
                    alert(e)
                })
            }
            actionSheel.show();
        }
    })
</script>
{{end}}

<script>

    document.querySelectorAll('.tree .children').forEach(c => {
        // 选择所有直属的元素子元素
        var nodes = Array.prototype.filter.call(c.children, function (child) {
            return child.nodeType === Node.ELEMENT_NODE;
        });
        //计算span的距离之和
        var width = 0;
        var offsetLeftArr = [];
        nodes.forEach(node => {
            var spans = Array.prototype.filter.call(node.children, function (child) {
                return child.tagName == 'SPAN'
            })
            offsetLeftArr.push(spans[0].offsetLeft)
        })
        var max = Math.max(...offsetLeftArr)
        var min = Math.min(...offsetLeftArr)
        var left = min;
        if (nodes.length > 0 && nodes[0].children) {
            var spans = Array.prototype.filter.call(nodes[0].children, function (child) {
                return child.tagName == 'SPAN';
            })
            var diff = spans[0].offsetWidth / 2
            left += diff;
        }
        width = max - min;
        var line = document.createElement('div');
        line.style.width = width + 'px';
        line.style.height = 0;
        line.style.position = 'absolute';
        line.style.left = left + 'px';
        line.style.overflow = 'hidden';
        line.style.borderTop = '1px solid #999';
        line.style.top = '-29px';
        c.appendChild(line);
    })

    var root = document.getElementById('tree-root');
    root.parentNode.scrollLeft = root.offsetWidth / 2.3;

    function scale(act) {
        var root = document.getElementById('tree-root');
        var scaleStr = root.style.transform
        var initScale = Number(scaleStr.substring(6, scaleStr.length - 1));
        switch (act) {
            case '+':
                initScale += 0.1
                break;
            case '-':
                initScale -= 0.1
                break;
        }
        width = root.offsetWidth * initScale;
        root.style.transform = `scale(${initScale})`
        root.style.width = width + 'px';
    }

    function _export() {
        if (isWeChat()) {
            document.getElementById('open-in-wx').style.display = 'block'
            return;
        }
        var root = document.getElementById('tree-root');
        var dom = root.cloneNode(true);
        document.body.appendChild(dom);
        dom.style.transform = 'scale(1)'
        html2canvas(dom, {
            width: root.offsetWidth,
            height: root.offsetHeight,
        }).then(canvas => {
            var data = canvas.toDataURL("image/png");
            var a = document.createElement('a');
            a.href = data;
            a.download = "族谱.png";
            a.click();
            // document.body.appendChild(canvas)
            document.body.removeChild(dom)
        })
    }
</script>
<script src="/js/html2canvas.js"></script>
{{template "footer" .}}